<!-- 课程班级 -->
<template>
	<view name="oil">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">RFID卡片列表</block>
		</cu-custom>
		<view class="wrap" :style="{height: contentHeight + 'px'}">
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#0081ff" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<!-- 第一页 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y :refresher-enabled="true" :refresher-triggered="triggered[0]" style="height: 100%;width: 100%;" @refresherrefresh="onRefresh" @scrolltolower="reachBottom">
						<view class="page-box">
							<view
								v-for="(item, index) in dataList[0]"
								:key="index"
								:name="index"
							>
								<u-cell
									:title="'序列号：' + item.deviceSn"
									:value="item.carNo"
									:label="'' + item.rfidDeviceId"
									@click="detail(item)"
									isLink
									:customStyle="{'backgroundColor': '#FFFFFF'}"
								>
									<u-avatar
										slot="icon"
										shape="square"
										size="40"
										src="https://mini.wm-mis.com/img/static/car.png"
										customStyle="margin: -3px 5px -3px 0"
									></u-avatar>
								</u-cell>
							</view>
							<u-gap height="5"></u-gap>
							<u-loadmore v-if="loadStatus[0] != 'loading'" :status="loadStatus[0]" bgColor="#f2f2f2" :nomoreText="nomoreText[0]"></u-loadmore>
							<u-gap height="5"></u-gap>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 第二页 -->
				<swiper-item class="swiper-item">
					<scroll-view scroll-y :refresher-enabled="true" :refresher-triggered="triggered[1]" style="height: 100%;width: 100%;" @refresherrefresh="onRefresh" @scrolltolower="reachBottom">
						<view class="page-box">
							<view
								v-for="(item, index) in dataList[1]"
								:key="index"
								:name="index"
							>
								<u-cell
									:title="'序列号：' + item.deviceSn"
									:value="item.carNo"
									:label="'' + item.rfidDeviceId"
									@click="detail(item)"
									isLink
									:customStyle="{'backgroundColor': '#FFFFFF'}"
								>
									<u-avatar
										slot="icon"
										shape="square"
										size="40"
										src="https://mini.wm-mis.com/img/static/car.png"
										customStyle="margin: -3px 5px -3px 0"
									></u-avatar>
								</u-cell>
							</view>
							<u-gap height="5"></u-gap>
							<u-loadmore v-if="loadStatus[1] != 'loading'" :status="loadStatus[1]" bgColor="#f2f2f2" :nomoreText="nomoreText[1]"></u-loadmore>
							<u-gap height="5"></u-gap>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
			<view class="cu-tabbar-height"></view>
		</view>
		
		<!-- 加载弹窗 -->
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="https://mini.wm-mis.com/img/static/car.png" mode="aspectFit" class="round"></image>
			<view class="gray-text">加载中...</view>
		</view>
		<u-popup :show="bindShow" @close="closeBindCb" @open="openBindCb" mode="bottom" style="position: absolute;">
			<view style="padding: 36rpx 30rpx;">
				<u--text prefixIcon="lock-open" iconStyle="font-size: 24px" margin="10px" size="18" text="绑定RFID卡" align="center"></u--text>
				<u-gap height="15" bgColor="#ffffff"></u-gap>
				<u-cell
					title="绑定商户"
					:value="bindMerchant ? bindMerchant.name : ''"
					@click="openMerchant()"
					isLink
					:border="false"
					:customStyle="{'backgroundColor': '#FFFFFF'}"
				>
				</u-cell>
				<u-gap height="30" bgColor="#ffffff"></u-gap>
				<u-button type="primary" @click="submitBind">提交绑定</u-button>
				<u-gap height="15" bgColor="#ffffff"></u-gap>
			</view>
		</u-popup>
		<u-picker :show="merchantShow" :columns="merchantColumns" keyName="name" :closeOnClickOverlay="true" @confirm="changeMerchant" @close="cancelMerchant" @cancel="cancelMerchant"></u-picker>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import api from '@/api/api'
	
	export default {
		data() {
			return {
				contentHeight: this.ScreenHeight - this.CustomBar,
				list: [
					{
						name: '未绑定'
					},
					{
						name: '已绑定'
					}
				],
				current: 0,
				swiperCurrent: 0,
				loadStatus: ['loading','loading'],
				nomoreText: ['我是有底线的', '我是有底线的'], 
				triggered: [false, false],
				dataList: [[], []],
				pageNo: [1, 1],
				pageSize: [10, 10],
				hasMore: [true, true],
				loading: false,
				bindShow: false,
				selectedCard: null,
				merchantShow: false,
				merchantColumns: [],
				bindMerchant: null,
				selectedMerchantIndex: [0]
			};
		},
		computed: {
			...mapState([
				'username',
				'token'
			]),
			top() {
				if(this.colorInfo){
					return this.CustomBar * 2 + 100
				}
				else{
					return this.CustomBar * 2
				}
			}
		},
		methods: {
			onRefresh(){
				this.pageNo[this.current] = 1;
				this.dataList[this.current] = [];
				this.hasMore[this.current] = true;
				this.getDataList(this.current);
				this.triggered[this.current] = true;//表示下拉刷新已经被触发
			},
			async reachBottom() {
				await this.getDataList(this.current);
			},
			// 页面数据
			async getDataList(idx) {
				let that = this
				if(!that.loading && that.hasMore[idx]){
					that.loading = true;
					that.loadStatus.splice(that.current, 1, "loading")
					let res = null
					if(idx == 0){
						res = await api.rfidList({
							carNo: that.username,
							pageSize: 9999,
							pageNo: 1
						})
					}
					else{
						res = await api.rfidList({
							carNo: that.username,
							pageSize: 9999,
							pageNo: 1
						})
					}
					
					if(res.data.code == 200 && res.data.success){
						for(let item of res.data.result){
							that.dataList[idx].push(item);
						}
						
						that.loading = false
						that.triggered[that.current] = false; //表示下拉刷新已完成
						that.loadStatus.splice(that.current, 1, "nomore")
						that.hasMore[idx] = false
						
						if(that.dataList[idx].length == 0){
							that.nomoreText[idx] = '~ 没有数据 ~'
						}
						else{
							that.nomoreText[idx] = '我是有底线的'
						}
					}
					else{
						that.loading = false
					}
				}
			},
			// 点击tab栏切换
			change(index) {
				this.swiperCurrent = index;
				this.current = index;
			},
			transition({ detail: { dx } }) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({ detail: { current } }) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				if(this.dataList[this.current].length == 0){
					this.getDataList(current);
				}
			},
			
			async merchants(){
				let that = this
				let res = await api.shopList({
					pageSize: 9999,
					pageNo: 1
				});
				if(res.data.code == 200 && res.data.success){
					that.merchantColumns = [res.data.result.records]
				}
			},
			changeMerchant(e) {
				const {
					indexs,
					value
				} = e
				let selectIndex = indexs[0];
				this.selectedMerchantIndex = [selectIndex]
				this.merchantShow = false;
				this.bindMerchant = this.merchantColumns[0][selectIndex]
			},
			cancelMerchant(){
				this.merchantShow = false;
			},
			openMerchant(){
				this.merchantShow = true;
			},
			detail(item){
				this.selectedCard = item;
				this.bindShow = true;
			},
			openBindCb() {},
			closeBindCb() {
				this.bindShow = false
				this.selectedCard = null;
			},
			async submitBind(){
				let that = this
				that.bindShow = false
				if(!that.loading){
					that.loading = true
					let res = await api.rfidBind({
						carNo: that.selectedCard.carNo,
						deviceld: that.selectedCard.deviceId,
						shopId: that.bindMerchant.id,
						tagId: that.selectedCard.tagId
					})
					that.loading = false
					if(res.data.code == 200 && res.data.success){
						uni.showToast({
							title: '操作成功',
							icon: 'success',
							duration: 2000
						})
						//that.downCallback();
					}
					else{
						uni.showToast({
							title: '操作失败',
							icon: 'fail',
							duration: 2000
						})
					}
					that.selectedCard = null;
				}
			}
		},
		async mounted() {
			this.getDataList(0);
			await this.merchants();
		}
	};
</script>

<style lang="scss" scoped>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f2f2f2;
}
/* #endif */
</style>

<style lang="scss" scoped>
	.swiper-box {
		flex: 1;
	}
	.swiper-item {
		height: 100%;
		position: relative;
	}
</style>

